import { Component } from 'react';

import { Group, Boxs, TextField,PhotoField,Button,ActionSheet,} from 'saltui';
const { HBox, Box } = Boxs;
const {
  IconButton,
  ButtonGroup,
} = Button;


import Upload from '../upload';
export default class PageHome extends Component {

  handleTextChange(name, newValue,no) {
      var options = this.props.options;
      options[no][name] = newValue;
      this.props.onAdd(options);
  }

  constructor(props) {
    super(props);

    this.state = {
      t1:'',
      no : 1
    };
    this.handleTextChange = this.handleTextChange.bind(this);

  }

  componentDidMount(){
    let t = this;
    $('#content'+t.props.datakey).keyup(
      function(){
        var value = $(this).val();
        var options = t.props.options;
        var content = {'optionsContent':value};
        options.splice(0,1,content);
        t.props.onAdd(options);
          // var remain = $(this).val().length;
          // if(remain > 500){
          //         pattern = "字数超过限制！";
          //     }else{
          //         var result = limitNum - remain;
          //         pattern = '还可以输入' + result + '字符';
          //     }
          //     $('#contentwordage').html(pattern);
           }
      );
    }


  handleDel(e){
    var delIndex=e.target.getAttribute('data-key');
    this.props.options.splice(delIndex,1);
    this.props.onDel(this.props.options);
  }
  handleAdd(e) {
    e.preventDefault();
      // var no = this.state.no ;
      // no ++;
      // this.setState({
      //   no : no
      // });
      // var optionName = this.formatNo(no);
      var rows = this.props.options;
      var option = {'optionsContent':'','optionSetting':{"optionBlank":"0","optionBlankWill":"0","optionScore":"0"}}
      rows.push(option);
      this.props.onAdd(rows);
    
    
  }

  //处理选项显示
  formatNo(no){
    switch(no)
        {
            case 1:
               return 'A';
                break;
            case 2:
                return 'B';
                break;
            case 3:
                return 'C';
                break;
            case 4:
                return 'D';
                break;
      }
  }


  handleChangePic(no,img){
    // this.setState({
    //   todoList:rows,
    // })
    debugger;
    var id = "";
    if(img.length>0){
      id = img[0].id;
    }
    var options = this.props.options;
    // var optionSetting = options.optionSetting;
    // // var imgList = options.optionsImg;
    // // imgList.push(img);
    // optionSetting['optionImg'] = id;
    options[no].optionSetting['optionImg'] = id;
    this.props.onAdd(options);
  }

  render() {
     const t = this;
    const label2 =<div className="dd-ques-num">33</div>  
 ;
     
    //处理选项显示
    function formatNo(no){
      switch(no)
          {
              case 1:
                return 'A';
                  break;
              case 2:
                  return 'B';
                  break;
              case 3:
                  return 'C';
                  break;
              case 4:
                  return 'D';
                  break;
        }
    }
    return (
<div>

          {this.props.type=='2'?
          
                <div className="dd-ques-anw-option" > 
                  <div className="dd-ques-optiontext">
                  <div className="dd-ques-textarea">
                  <textarea id={'content'+this.props.datakey}></textarea></div>
              
                  </div>
             
                </div> 
            : 
            this.props.options.map(function(item,j){
              return (
              <div>
                <div className="dd-ques-option" > 
                  <div className="dd-ques-optiontext">
                  <TextField
                    label={formatNo(j+1)}
                    placeholder="请输入"
                    value={item.optionsContent}
                    onChange={(value) => {t.handleTextChange('optionsContent', value,j);}}
                  />
                  <i className="iconfont icon-minus" onClick={this.handleDel.bind(this)} data-key={j}></i>
                  </div>
                <div className="dd-ques-optionpic">                      
                  <Upload keyNum={this.props.datakey+''+j} imgList={item.optionSetting.optionImg} dir="questionnaire" onChange={this.handleChangePic.bind(this,j)} limitNo="1" onDel={this.handleChangePic.bind(this,j)}/>
                  </div>
                </div>
                
               </div>
            )}.bind(this))
            
          }
            <div onClick={this.handleAdd.bind(this)} className={this.props.type==2?'t-DN':''}  name="新增" ref="addnew">
           <Button type="primary" display="banner" >
              <i className="iconfont icon-plus"></i>
            </Button>
            </div>
            </div>
         
    )
}
}

